<template>
  <div class="main" style="position: relative;">
    <div class="questionDetail">
      <!-- <goBack :white="true" :hasTitle="true" topTitle="问答详情"></goBack> -->
      <div v-show="showBackArrow" class="back-wrapper whi flex-h">
        <div class="backboxs" @click="$router.back()">
          <i class="imgIcon backimgs"></i>
          <span class="back">返回</span>
        </div>
        <div class="flex1"></div>
        <div class="backboxs right" @click="openShare">
          <img class="imgIcon" src="~/static/images/shareBlack.png" alt />
        </div>
      </div>
      <scrollerEdit lock-x @on-scroll-bottom="infinite" :scroll-bottom-offst="150" ref="scrollers">
        <div class="scrollerDiv">
          <div class="mainContainer">
            <div class="topArea">
              <div class="includeArea">
                <div class="userMsg">
                  <div class="avatar">
                    <img v-if="questionDetail.privacy == 1 || !userInfo.avatar" src="~/static/default.png" alt="" />
                    <img v-else :src="userInfo.avatar" alt="" />
                  </div>
                  <div class="nameAndTime">
                    <div class="name">{{ questionDetail.privacy == 1 ? questionDetail.privacyName : userInfo.name }}</div>
                    <div class="time">{{ questionDetail.createtime ? new Date(questionDetail.createtime).format('yyyy-MM-dd hh:mm') : '' }}</div>
                  </div>
                </div>
                <div class="deleteBtn" v-show="showDeleteBtn" @click="handleShowDeleteDialog">删除</div>
              </div>
              <div class="qusTitle">{{ questionDetail.title }}</div>
              <div class="picGroup">
                <div class="singlePic" v-for="(item, index) of questionDetail.pictures" :key="index">
                  <img :src="item" alt="" />
                </div>
              </div>
              <div class="typeArea">
                <div>{{ questionDetail.questionType }}</div>
                <div>{{ total + '条回答' }}</div>
              </div>
            </div>
            <div class="answerList" v-if="total > 0">
              <div class="singleItem" v-for="(item, index) of answerList" :key="index">
                <div class="answerVosAvatar">
                  <img :src="item.avatar" alt />
                </div>
                <div style="flex: 1;">
                  <div :class="['ansContainer', item.answerReplyVos.length > 0 ? 'hasAnswer' : '']">
                    <div class="line_1">
                      <div class="left">
                        <div class="proName">{{ item.name }}</div>
                        <div class="ansTime">{{ item.createtime ? new Date(item.createtime).format('yyyy-MM-dd hh:mm') : '' }}</div>
                      </div>
                      <div :class="['right', item.followStatus == 1 ? 'hasAttention' : '']" @click="getAttention(item)">{{ item.followStatus == 1 ? '已关注' : '+ 关注' }}</div>
                    </div>
                    <div class="line_2">{{ item.text }}</div>
                    <div class="line_3">
                      <div class="left" @click="getProfessorHelp(item)">
                        <i v-if="item.isLiked == 0" class="icon_zan_n"></i>
                        <i v-else class="icon_zan_s"></i>
                        <span :class="[item.isLiked == 1 ? 'isLiked' : '']">{{ item.helpCount > 0 ? item.helpCount : '有帮助' }}</span>
                      </div>
                      <div class="right" @click="handleAnswerTheQuestion(item)">
                        <i class="bg-com_icon_ask_gray_40"></i>
                      </div>
                    </div>
                  </div>
                  <div :class="['ansReplyList', item.answerReplyVos.length > 3 ? 'moreAnswerReply' : '']" v-show="item.answerReplyVos.length > 0">
                    <div class="replyItem" v-for="(m, n) of item.answerReplyVos" :key="n">
                      <div class="rp_left">
                        <img v-if="m.replyUserHeadImg" :src="m.replyUserHeadImg" alt />
                        <img v-else src="~/static/default.png" alt />
                      </div>
                      <div class="rp_right">
                        <div class="whoToWho">
                          {{ m.replyUserName }}
                          <span>回复</span>
                          {{ m.toUserName }}
                        </div>
                        <div class="rpContent">{{ m.content }}</div>
                        <div class="bottom">
                          <div class="rpTime">{{ m.createTime ? new Date(m.createTime).format('yyyy-MM-dd hh:mm') : '' }}</div>
                          <div class="rpBtn" @click="handleAnswerTheQuestion(m)">
                            <i class="bg-com_icon_ask_gray_40"></i>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="moreReply" v-show="item.answerReplyVos.length > 3" @click="goAllReply('./answerReplyDetail', JSON.stringify(item))">查看全部回复</div>
                </div>
              </div>
            </div>
            <div v-else>
              <div class="noDataImage">
                <img src="~/static/nothing/empty_answer.png" alt />
                <div class="describe">这个问题还没有回答哦，赶紧来抢答吧～</div>
              </div>
            </div>
          </div>
          <div v-show="total > 0">
            <load-more :show-loading="showLoading" :bounce="false" :tip="tipmsg"></load-more>
          </div>
          <div style="width: 100%; height: 1rem;"></div>
        </div>
      </scrollerEdit>
    </div>
    <div v-transfer-dom>
      <popup v-model="ansDialog" position="bottom" style="background:transparent">
        <div class="answerArea">
          <div class="dialogTopArea">
            <div class="left">
              <div class="tip">追问</div>
              <div class="userName">{{ answerToUserName }}</div>
            </div>
            <i
              class="right"
              @click="
                ansDialog = false
                replyContent = ''
              "
            ></i>
          </div>
          <div class="textArea">
            <textarea v-on:blur="scrolltotop" v-model="replyContent" cols="50" rows="5" placeholder="请输入追问内容"></textarea>
          </div>
          <div class="btnArea">
            <div class="ansBtn" @click="handleMakeComments()">发表追问</div>
          </div>
        </div>
      </popup>
    </div>
    <sharePopup :showSharePopup="showShare" @cancel="showShare = false"></sharePopup>

    <div v-show="showConfirm" class="floatDialog">
      <div class="confirmArea">
        <div class="tip">提示</div>
        <div class="title">确定删除当前问答？</div>
        <div class="btnGroup">
          <div class="cancelBtn btn" @click="handleCloseDialog">取消</div>
          <div class="sureBtn btn" @click="onConfirm">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import goBack from '~/components/goBack'
import { professorQusDetail, agencyfollowUser, professorHelp, myPersonalInfo, replyAnswer, deletedQuestions } from '~/api/identity'
import { format } from '~/plugins/filter'
import ls from 'store2'
import { LoadMore, TransferDom, Popup } from 'vux'
import scrollerEdit from '~/components/scrollerEdit'
import sharePopup from './components/sharePopup'
import { showShare } from '~/components/share/index'
import wxapi from '~/plugins/wxapi.js'
export default {
  components: {
    goBack,
    Popup,
    scrollerEdit,
    LoadMore,
    sharePopup,
  },
  directives: {
    TransferDom,
  },
  data() {
    return {
      showBackArrow: true,
      showShare: false,
      questionDetail: {},
      userInfo: {}, // 提问用户信息
      questionParams: {
        id: null,
        pageNo: 1,
        pageSize: 10,
      },
      answerList: [],
      total: 0,
      totalPages: 0,
      ansDialog: false,
      answerToUserName: '',
      replyContent: '', // 追问内容
      rpDetail: {}, // 回复的数据信息
      personalInfo: {},
      showLoading: true,
      tipmsg: '加载更多',
      noData: true,
      showDeleteBtn: false,
      showConfirm: false,
    }
  },
  created() {
    if (this.commonJs.GetUrlParam('shareQuestion') || this.commonJs.GetUrlParam('mini_token')) {
      this.showBackArrow = false
    }
  },
  mounted() {
    this.$visit('Questions/' + this.commonJs.GetUrlParam('qid'))
    this.questionParams.id = this.$route.query.qid
    this.getQuestionDetail()
    wxapi.wxRegister()
  },
  methods: {
    goAllReply(routerName, pagram) {
      if (this.commonJs.GetUrlParam('shareExpert') || this.commonJs.GetUrlParam('shareQuestion')) {
        this.showShare = true
        return false
      }
      if (this.commonJs.GetUrlParam('mini_token')) {
        this.$router.push({
          path: routerName,
          query: {
            type: pagram,
            mini_token: this.commonJs.GetUrlParam('mini_token'),
          },
        })
      } else {
        this.goto(routerName, pagram)
      }
    },
    wxShare(titles, descs) {
      let uri = window.location.href + '&shareQuestion=' + true
      let option = {
        title: titles,
        desc: descs,
        link: uri,
        imgUrl: 'https://static.shengxue985.com/sxzx_app/logo/120x120.png',
      }

      wxapi.ShareAppMessage(option)
      wxapi.ShareTimeline(option)
    },
    openShare() {
      showShare('open')
    },
    scrolltotop() {
      this.$refs.scrollers.reset({ top: 0 })
      setTimeout(() => {
        if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
          return
        }

        let result = 'pc'
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
          //判断iPhone|iPad|iPod|iOS
          result = 'ios'
        } else if (/(Android)/i.test(navigator.userAgent)) {
          //判断Android
          result = 'android'
        }
        if ((result = 'ios')) {
          document.activeElement.scrollIntoViewIfNeeded(true)
        }
      }, 50)
    },
    // 获取用户信息
    getUserInfo() {
      myPersonalInfo().then((res) => {
        if (res.code == 0) {
          this.personalInfo = res.data
        }
      })
    },
    // 获取问答详情
    getQuestionDetail() {
      this.$loading('open')
      professorQusDetail(this.questionParams)
        .then((res) => {
          if (res.code == 0) {
            this.questionDetail = res.data
            if (res.data.privacy == 0) {
              this.userInfo = res.data.author
            }
            this.answerList = res.data.pageAnswer ? res.data.pageAnswer.list : []
            if (this.answerList.length == 0) {
              this.noData = true
            } else {
              this.noData = false
            }
            this.total = res.data.pageAnswer ? res.data.pageAnswer.total : 0
            this.totalPages = this.total == 0 ? 0 : Math.ceil(this.total / res.data.pageAnswer.pageSize)
            if (this.totalPages < 2) {
              this.showLoading = false
              this.tipmsg = '没有更多问答'
            }
            let descs

            if (res.data.pageAnswer.list) {
              descs = res.data.pageAnswer.list[0].text
            } else {
              descs = '升学在线,上更好大学'
            }
            this.wxShare(res.data.title, descs)
          }

          if (res.data.author.userId == ls.get('yxkData').userId) {
            this.showDeleteBtn = true
          } else {
            this.showDeleteBtn = false
          }
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    // 关注与取消关注
    getAttention(item) {
      if (this.commonJs.GetUrlParam('shareExpert') || this.commonJs.GetUrlParam('shareQuestion')) {
        this.showShare = true
        return false
      }
      this.$loading('open')
      let statusAction = 0 // 1:关注   0:取消关注
      if (item.followStatus == 0) {
        item.followStatus = 1 // 已关注
        statusAction = 1
      } else {
        item.followStatus = 0 // 未关注
        statusAction = 0
      }
      agencyfollowUser({
        action: statusAction,
        toUserId: item.userId,
      })
        .then(() => {
          this.$hideLoading()
        })
        .catch((error) => {
          this.$vux.toast.text('网络故障，请稍后重试~')
          this.$hideLoading()
        })
    },
    // 点赞
    getProfessorHelp(item) {
      if (this.commonJs.GetUrlParam('shareExpert') || this.commonJs.GetUrlParam('shareQuestion')) {
        this.showShare = true
        return false
      }

      this.$loading('open')
      let statusAction = 0 // 1:点赞   0:取消点赞
      if (item.isLiked == 0) {
        item.isLiked = 1
        statusAction = 1
      } else {
        item.isLiked = 0
        statusAction = 0
      }
      professorHelp({
        action: statusAction,
        id: item.answerId,
      })
        .then((res) => {
          item.helpCount = res.data.helpCount
        })
        .catch((err) => {
          this.$vux.toast.text('网络故障，请稍后重试~')
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    // 追问
    handleAnswerTheQuestion(data) {
      if (this.commonJs.GetUrlParam('shareExpert') || this.commonJs.GetUrlParam('shareQuestion')) {
        this.showShare = true
        return false
      }
      this.getUserInfo()

      this.ansDialog = true
      if (data.id) {
        this.answerToUserName = data.name
      } else {
        this.answerToUserName = data.replyUserName
      }
      this.rpDetail = data
    },
    // 发表追问
    handleMakeComments() {
      this.$loading('open')
      const params = {
        answerId: this.rpDetail.answerId,
        content: this.replyContent,
        replyUserHeadImg: this.personalInfo.avatar,
        replyUserId: ls.get('yxkData').userId,
        replyUserName: this.personalInfo.nickName,
        replyUserSection: 0,
        toUserId: this.rpDetail.id ? this.rpDetail.userId : this.rpDetail.replyUserId,
        toUserName: this.rpDetail.id ? this.rpDetail.name : this.rpDetail.replyUserName,
        toUserSection: this.rpDetail.id ? 1 : this.rpDetail.replyUserSection,
      }
      // 追问回复
      replyAnswer(params)
        .then((res) => {
          this.ansDialog = false
          this.replyContent = ''
          this.getQuestionDetail()
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    infinite() {
      if (this.questionParams.pageNo < this.totalPages) {
        this.questionParams.pageNo = this.questionParams.pageNo + 1
        professorQusDetail(this.questionParams).then((res) => {
          if (res.code == '0') {
            let newArr = res.data.pageAnswer ? res.data.pageAnswer.list : []
            this.answerList = this.answerList.concat(newArr)
            this.total = res.data.pageAnswer ? res.data.pageAnswer.total : 0
            this.totalPages = this.total == 0 ? 0 : Math.ceil(this.total / res.data.pageAnswer.pageSize)
          }
        })
      } else {
        this.showLoading = false
        this.tipmsg = '没有更多问答'
      }
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData,
        },
      })
    },
    // 删除自己提出的问题
    handleShowDeleteDialog() {
      this.showConfirm = true
    },
    onConfirm() {
      this.$loading('open')
      deletedQuestions({ id: this.questionParams.id })
        .then((res) => {
          this.showConfirm = false
          this.$vux.toast.text('操作成功')
          this.$router.back()
        })
        .finally(() => {
          this.$hideLoading()
        })
    },
    handleCloseDialog() {
      this.showConfirm = false
    },
  },
}
</script>

<style lang="less" scoped>
.questionDetail {
  width: 100%;
  height: 100vh;
  .scrollerDiv {
    .mainContainer {
      .topArea {
        padding: 0.32rem 0.32rem 0.44rem;
        margin-bottom: 0.24rem;
        background: #fff;
        .includeArea {
          display: flex;
          justify-content: space-between;
          .userMsg {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 0.4rem;
            .avatar {
              width: 0.8rem;
              height: 0.8rem;
              margin-right: 0.24rem;
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
            .nameAndTime {
              .name {
                color: #222;
                font-size: 0.3rem;
                font-weight: bold;
                line-height: 0.26rem;
                margin-bottom: 0.16rem;
              }
              .time {
                color: #c7c7c7;
                font-size: 0.24rem;
                line-height: 0.26rem;
              }
            }
          }
          .deleteBtn {
            color: #999;
            font-size: 0.28rem;
          }
        }
        .qusTitle {
          color: #222;
          font-size: 0.28rem;
          line-height: 0.48rem;
          margin-bottom: 0.24rem;
        }
        .picGroup {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
          .singlePic {
            width: 2.08rem;
            height: 2.4rem;
            margin-right: 0.2rem;
            margin-bottom: 0.24rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .typeArea {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #999;
          font-size: 0.28rem;
        }
      }
      .qusTitle {
        color: #222;
        font-size: 0.28rem;
        line-height: 0.48rem;
        margin-bottom: 0.24rem;
      }
      .typeArea {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #999;
        font-size: 0.28rem;
      }
    }
    .answerList {
      padding: 0.4rem 0.32rem;
      background: #fff;
      .singleItem {
        display: flex;
        justify-content: flex-start;
        padding: 0.32rem 0;
        border-bottom: 1px solid #e5e8ed;
        .answerVosAvatar {
          width: 0.8rem;
          height: 0.8rem;
          margin-right: 0.24rem;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .ansContainer {
          .line_1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.14rem;
            .left {
              .proName {
                margin-top: 0.06rem;
                margin-bottom: 0.16rem;
                color: #222;
                font-size: 0.3rem;
                line-height: 0.3rem;
                font-weight: bold;
              }
              .ansTime {
                color: #c7c7c7;
                font-size: 0.24rem;
                line-height: 0.26rem;
              }
            }
            .right {
              width: 1.25rem;
              height: 0.58rem;
              border-radius: 0.3rem;
              border: 1px solid @mainColor;
              color: @mainColor;
              font-size: 0.26rem;
              text-align: center;
              line-height: 0.58rem;
            }
            .hasAttention {
              border-color: #f7f7fa;
              background: #f7f7fa;
              color: #c7c7c7;
            }
          }
          .line_2 {
            color: #222;
            font-size: 0.28rem;
            line-height: 0.44rem;
            margin-bottom: 0.25rem;
          }
          .line_3 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              i {
                display: inline-block;
                width: 0.4rem;
                height: 0.4rem;
                margin-right: 0.08rem;
              }
              .icon_zan_n {
                background: url('~/static/sprite/other_sprites.png') 3.4rem -3.2rem;
                background-size: 4.68rem 4.08rem;
              }
              .icon_zan_s {
                background: url('~/static/sprite/other_sprites.png') 2.8rem -3.2rem;
                background-size: 4.68rem 4.08rem;
              }

              span {
                font-size: 0.26rem;
                color: #c7c7c7;
              }
              .isLiked {
                color: #ffbd3e;
              }
            }
            .right {
              width: 0.4rem;
              height: 0.4rem;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
        .hasAnswer {
          padding-bottom: 0.32rem;
          border-bottom: 1px solid #e5e8ed;
        }
        .ansReplyList {
          padding-top: 0.32rem;
          .replyItem {
            display: flex;
            justify-content: flex-start;
            margin-bottom: 0.39rem;
            .rp_left {
              width: 0.48rem;
              height: 0.48rem;
              margin-right: 0.16rem;
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
            .rp_right {
              flex: 1;
              .whoToWho {
                color: #222;
                font-size: 0.28rem;
                font-weight: bold;
                margin-bottom: 0.13rem;
                span {
                  color: #c7c7c7;
                  font-weight: normal;
                  margin: 0 0.16rem;
                }
              }
              .rpContent {
                color: #222;
                font-size: 0.28rem;
                line-height: 0.44rem;
                margin-bottom: 0.24rem;
              }
              .bottom {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .rpTime {
                  color: #c7c7c7;
                  font-size: 0.28rem;
                }
                .rpBtn {
                  width: 0.4rem;
                  height: 0.4rem;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
          .replyItem:last-child {
            margin-bottom: 0;
          }
          .replyItem:nth-child(4) {
            display: none;
          }
        }
        .moreAnswerReply {
          border-bottom: 1px solid #e5e8ed;
        }
        .moreReply {
          margin-top: 0.22rem;
          color: #222;
          font-size: 0.28rem;
          font-weight: bold;
          line-height: 0.38rem;
        }
      }
      .singleItem:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
    }
    .noDataImage {
      background: #fff;
      text-align: center;
      padding: 0.4rem 0 1rem;
      img {
        width: 2.4rem;
        height: 2.4rem;
        margin-bottom: 0.24rem;
      }
      .describe {
        color: #999;
        font-size: 0.28rem;
        line-height: 0.4rem;
      }
    }
  }
}

.floatDialog {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  .confirmArea {
    width: 5rem;
    margin: 4rem auto 0;
    background: #fff;
    border-radius: 0.1rem;
    padding-top: 0.5rem;
    text-align: center;
    overflow: hidden;
    .tip {
      color: @mainColor;
      font-size: 0.26rem;
      margin-bottom: 0.15rem;
    }
    .title {
      color: #222;
      font-size: 0.3rem;
      margin-bottom: 0.3rem;
    }
    .btnGroup {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .btn {
        width: 50%;
        height: 0.88rem;
        line-height: 0.88rem;
        text-align: center;
        border: 1px solid #e5e8ed;
        font-size: 0.28rem;
      }
      .sureBtn {
        color: @mainColor;
      }
      .cancelBtn {
        color: #222;
      }
    }
  }
}

.answerArea {
  background: #fff;
  border-radius: 0.1rem 0.1rem 0 0;
  .dialogTopArea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 0.88rem;
    padding: 0.23rem 0.32rem;
    border-bottom: 1px solid #e5e8ed;
    .left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .tip {
        color: #999;
        font-size: 0.3rem;
        margin-right: 0.16rem;
      }
      .userName {
        color: #222;
        font-size: 0.3rem;
        font-weight: bold;
      }
    }
  }
  .right {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.7rem;
    background-size: 3rem 2.4rem;
  }
}
.textArea {
  textarea {
    font-size: 0.28rem;
    line-height: 0.4rem;
    width: 100%;
    border: none;
    outline: none;
    padding: 0.46rem 0.32rem 0.34rem;
    resize: none;
    color: #222;
  }
}
.btnArea {
  width: 100%;
  height: 0.88rem;
  padding-right: 0.32rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .ansBtn {
    padding: 0.16rem 0.24rem;
    line-height: 0.3rem;
    text-align: center;
    border-radius: 0.31rem;
    background: @mainColor;
    color: #fff;
    font-size: 0.26rem;
  }
}
textarea::-webkit-input-placeholder {
  color: #c7c7c7;
}
textarea:-moz-placeholder {
  color: #c7c7c7;
}
textarea::-moz-placeholder {
  color: #c7c7c7;
}
textarea:-ms-input-placeholder {
  color: #c7c7c7;
}
.back-wrapper {
  width: 7.5rem;
  height: 0.8rem;
  line-height: 0.8rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  background: #fff;

  .backboxs {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 1.2rem;
    height: 0.8rem;
    padding: 0.2rem 0;
  }

  .imgIcon {
    width: 0.4rem;
    height: 0.4rem;
  }
  .backimgs {
    display: inline-block;
    background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.1rem;
    background-size: 3rem 2.4rem;
  }
  .back {
    display: inline-block;
    margin-left: 0.1rem;
    font-weight: bold;
    color: #222;
  }
  .right {
    text-align: right;
    .imgIcon {
      margin-left: 0.8rem;
    }
  }
}
</style>
